<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neo4j 知识图谱</title>
    <link rel="stylesheet" href="styles.css">
    <!-- 使用D3.js替代3D库 -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🧠 Neo4j 知识图谱</h1>
            <div class="controls">
                <button id="refreshBtn" class="btn btn-primary">刷新数据</button>
                <button id="initDataBtn" class="btn btn-secondary">初始化示例数据</button>
                <button id="addNodeBtn" class="btn btn-success">添加节点</button>
                <input type="text" id="searchInput" placeholder="搜索节点..." class="search-input">
                <button id="searchBtn" class="btn btn-info">搜索</button>
                <button id="settingsBtn" class="btn btn-warning">⚙️ Neo4j设置</button>
            </div>
        </header>

        <main class="main-content">
            <div class="sidebar">
                <div class="panel">
                    <h3>图谱统计</h3>
                    <div class="stats">
                        <div class="stat-item">
                            <span class="stat-label">节点数量:</span>
                            <span id="nodeCount" class="stat-value">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">关系数量:</span>
                            <span id="relationshipCount" class="stat-value">0</span>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <h3>连接状态</h3>
                    <div class="connection-status">
                        <div class="status-item">
                            <span class="status-label">数据库状态:</span>
                            <span id="connectionStatus" class="status-value disconnected">未连接</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">数据库地址:</span>
                            <span id="currentDbUrl" class="status-value">-</span>
                        </div>
                    </div>
                </div>

                <div class="panel">
                    <h3>节点详情</h3>
                    <div id="nodeDetails" class="node-details">
                        <p class="placeholder">点击节点查看详情</p>
                    </div>
                </div>

                <div class="panel">
                    <h3>Cypher 查询</h3>
                    <textarea id="cypherQuery" placeholder="输入Cypher查询语句..." rows="4"></textarea>
                    <button id="executeQueryBtn" class="btn btn-warning">执行查询</button>
                    <div id="queryResult" class="query-result"></div>
                </div>
            </div>

            <div class="graph-container">
                <div id="loading" class="loading">加载中...</div>
                <!-- 2D图谱容器 -->
                <svg id="graph"></svg>
            </div>
        </main>
    </div>

    <!-- 保持原有的模态框 -->
    <div id="addNodeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加新节点</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addNodeForm">
                    <div class="form-group">
                        <label for="nodeLabel">节点标签:</label>
                        <input type="text" id="nodeLabel" required placeholder="例如: Person, Company">
                    </div>
                    <div class="form-group">
                        <label for="nodeName">名称:</label>
                        <input type="text" id="nodeName" required placeholder="节点名称">
                    </div>
                    <div class="form-group">
                        <label for="nodeProperties">其他属性 (JSON格式):</label>
                        <textarea id="nodeProperties" placeholder='{"age": 30, "city": "北京"}'></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">创建节点</button>
                        <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="addRelationshipModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加关系</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addRelationshipForm">
                    <div class="form-group">
                        <label>从节点:</label>
                        <span id="fromNodeInfo"></span>
                    </div>
                    <div class="form-group">
                        <label>到节点:</label>
                        <span id="toNodeInfo"></span>
                    </div>
                    <div class="form-group">
                        <label for="relationshipType">关系类型:</label>
                        <input type="text" id="relationshipType" required placeholder="例如: WORKS_FOR, KNOWS">
                    </div>
                    <div class="form-group">
                        <label for="relationshipProperties">关系属性 (JSON格式):</label>
                        <textarea id="relationshipProperties" placeholder='{"since": "2020", "role": "manager"}'></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">创建关系</button>
                        <button type="button" class="btn btn-secondary" onclick="closeRelationshipModal()">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 新增Neo4j设置模态框 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>⚙️ Neo4j 数据库设置</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <form id="settingsForm">
                    <div class="form-group">
                        <label for="neo4jUrl">数据库地址:</label>
                        <input type="text" id="neo4jUrl" required placeholder="bolt://localhost:7687" value="bolt://localhost:7687">
                        <small class="form-help">例如: bolt://localhost:7687 或 neo4j://localhost:7687</small>
                    </div>
                    <div class="form-group">
                        <label for="neo4jUsername">用户名:</label>
                        <input type="text" id="neo4jUsername" required placeholder="neo4j" value="neo4j">
                    </div>
                    <div class="form-group">
                        <label for="neo4jPassword">密码:</label>
                        <input type="password" id="neo4jPassword" required placeholder="password">
                    </div>
                    <div class="form-group">
                        <label for="neo4jDatabase">数据库名称:</label>
                        <input type="text" id="neo4jDatabase" placeholder="neo4j" value="neo4j">
                        <small class="form-help">留空使用默认数据库</small>
                    </div>
                    <div class="form-actions">
                        <button type="button" id="testConnectionBtn" class="btn btn-info">测试连接</button>
                        <button type="submit" class="btn btn-primary">保存设置</button>
                        <button type="button" class="btn btn-secondary" onclick="closeSettingsModal()">取消</button>
                    </div>
                </form>
                <div id="connectionTestResult" class="connection-test-result"></div>
            </div>
        </div>
    </div>

    <div id="notification" class="notification"></div>

    <script src="app.js"></script>
</body>
</html>